import React, { useEffect, useState } from 'react';
import { Button, Input, message, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../../api/zzachieve';
import "./AchieForthTwo.scss"
import { useNavigate } from 'react-router-dom';
interface Props {

}

interface DataType {
    id: number;
    key: React.Key;
    name: string;
    age: number;
    address: string;
}
function AchieThird(props: Props) {

    useEffect(() => {
        service.people_module().then((ok) => {
            console.log(ok.data);
            ok.data.map((item: any) => {
                item.key = item.id
            })
            setTableData(ok.data)
        })
    }, [])

    const [messageApi, contextHolder] = message.useMessage();

    let [tabledata, setTableData] = useState([])

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const { Search } = Input;


    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns: ColumnsType<DataType> = [
        {
            title: '模板名称',
            dataIndex: 'name',
            key: "name"
        },
        {
            title: '考核周期',
            dataIndex: 'time',
            key: "time"
        },
        {
            title: '考核类型',
            dataIndex: 'type',
            key: "type"
        },
        {
            title: '核算方式',
            dataIndex: 'method',
            key: "method"
        },
        {
            title: '备注',
            dataIndex: 'more',
            key: "more"
        },
        {
            title: '操作',
            dataIndex: 'e',
            key: "e",
            render: (_, record) => {
                return <>
                    <a >编辑</a>
                    <a onClick={() => { handlemodulesdel(record.id) }}>删除</a>
                </>
            }
        },
    ];

    let handlemodulesdel = async (id: any) => {
        let res = await service.people_moduledel({ id: id })
        console.log(res);
        if (res.status == 200) {
            messageApi.open({
                type: 'success',
                content: '已删除',
            })
        }

    }

    let onSearch = async (value: String) => {
        let res = await service.people_modulesearch({ name_like: value })

        console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }
    let navigate = useNavigate()
    let handleadd = () => {
        navigate('/index/achievements/achieForthTwoAdd')
    }

    return (
        <div>
            <div className='third'>
                <div className='top'>
                    <div className='colo'></div>
                    <div className='files'>员工绩效档案</div>
                </div>
                <div className='middle'>
                    <Search placeholder="请输入关键字"
                        onSearch={onSearch}
                        style={{ width: 300 }} />
                    <div className='btn'>
                        <Button type="primary" onClick={handleadd}>新增模板</Button>
                        <Button type="primary" ghost>批量删除</Button>
                    </div>
                </div>
                <div className='form'>
                    <span style={{ marginLeft: 8 }}>
                        {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                    </span>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={tabledata} />
                </div>
            </div>
            {contextHolder}
        </div>
    );
}

export default AchieThird;